<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script type="module">
        // 轨道控制器
        import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
        import * as THREE from 'three';
        // 创建相机
        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(2, 200, 20)
        camera.lookAt(0, 0, 0);


        // 创建渲染器
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);


        // 创建场景
        const scene = new THREE.Scene();
        // scene.background = new THREE.Color(0x000000);

        const gridHelper = new THREE.GridHelper(100);
        scene.add(gridHelper);

        // 创建结构和材质，生成几何体
        // 绘制一个立方体
        // const geometry = new THREE.BoxGeometry(10, 10, 10);
        // const material = new THREE.MeshBasicMaterial({ color: 0x0000ee });
        // const cube = new THREE.Mesh(geometry, material);
        // scene.add(cube);

        // 绘制球体
        const geometry3 = new THREE.SphereGeometry(5, 32, 32);
        const material3 = new THREE.MeshBasicMaterial({ color: 0x0000ff, wireframe: true });
        const sphere = new THREE.Mesh(geometry3, material3);
        scene.add(sphere);
        sphere.position.set(0, 0, 0);


        // 绘制圆锥
        const geometry1 = new THREE.ConeGeometry(5, 10, 32);
        const material1 = new THREE.MeshBasicMaterial({ color: 0xff0000 });
        const cone = new THREE.Mesh(geometry1, material1);
        scene.add(cone);
        cone.position.set(20, 0, 0);

        // 绘制平面
        const geometry2 = new THREE.PlaneGeometry(10, 10, 20, 20);
        const material2 = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
        const plane = new THREE.Mesh(geometry2, material2);
        scene.add(plane);
        plane.position.set(-20, 0, 0);
        plane.rotation.x = Math.PI * -0.5;



        // 创建轨道控制器
        const controls = new OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.05;



        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
        animate();


    </script>
</body>

</html>